<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="onAdd" icon="el-icon-plus">添加</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      lazy
      default-expand-all>
      <el-table-column
        prop="id"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="title"
        label="推送主题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="information"
        label="更新说明">
      </el-table-column>
      <el-table-column
        prop="version"
        width="100"
        label="版本号">
      </el-table-column>
      <el-table-column
        prop="is_real"
        width="100"
        label="强制更新">
        <template slot-scope="scope">
          <el-tag
            :type='!!scope.row.is_real ? "danger" : "primary"'>
            {{!!scope.row.is_real ? "是" : "否"}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="and_url"
        label="安卓下载地址"
        width="200">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="更新时间"
        width="180">
      </el-table-column>
      <!-- <el-table-column
        fixed="right"
        label="操作"
        width="110">
        <template slot-scope="scope">
          <el-button @click="editor(scope.row)" size="small">修改</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="添加推送"
      :visible.sync="dialogVisible">
      <!-- :rules="rules" -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="更新主题" prop="title" required>
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="更新说明" prop="information" required>
          <el-input type="textarea" v-model="ruleForm.information"></el-input>
        </el-form-item>
        <el-form-item label="安卓地址" prop="and_url" required>
          <el-input type="url" placeholder="安卓下载地址" v-model="ruleForm.and_url"></el-input>
        </el-form-item>
        <!-- <el-form-item label="苹果地址" prop="ios_url" required>
          <el-input type="url" placeholder="苹果下载地址" v-model="ruleForm.ios_url"></el-input>
        </el-form-item> -->
        <el-form-item label-width='0'>
          <el-col :span="11">
            <el-form-item label="版本" prop="version" required>
              <el-input placeholder="版本号(1.0.0)" v-model="ruleForm.version"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="强制更新">
              <el-switch v-model="ruleForm.is_real"></el-switch>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, save, put } from '@/api/app'
import Pagination from '@/components/Pagination'
import { date_formart } from '@/filters/index'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      isEditor: false,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-create_time',
        where: []
      },
      ruleForm: {
        information: '',
        title: '',
        and_url: '',
        ios_url: '',
        version: '',
        is_real: 0 // 0不需要强制更新 1强制
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 添加推送
    onAdd() {
      this.dialogVisible = true
    },
    getList() {
      this.listLoading = true
      list().then(response => {
        this.listLoading = false
        if (response.status) {
          this.list = response.data.data.map(c => {
            return {
              ...c,
              create_time: date_formart(c.create_time, 'yyyy-MM-dd hh:mm')
            }
          })
          this.total = response.data.total
        }
      })
    },
    // 提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.commit('SHOW_LOADING')
          this.ruleForm['is_real'] = Number(this.ruleForm['is_real'])
          if (this.isEditor) {
            put(this.ruleForm.id, this.ruleForm).then(res => {
              this.$store.commit('HIDE_LOADING')
              this.getList()
              this.dialogVisible = false
            })
          } else {
            save(this.ruleForm).then(res => {
              this.$store.commit('HIDE_LOADING')
              this.getList()
              this.dialogVisible = false
            })
          }
        } else {
          return false
        }
      })
    },
    editor(row) {
      this.ruleForm = {
        id: row.id,
        information: row.information,
        title: row.title,
        and_url: row.and_url,
        ios_url: row.ios_url,
        version: row.version,
        is_real: row.is_real
      }
      this.dialogVisible = true
      this.isEditor = true
    }
  }
}
</script>

<style lang="scss">
</style>
